<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>汇总</title>
</head>
<body>
<script th:src="@{/scripts/boot.js}"></script>
<style>
    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    }
    .item
    {
        float:left;
        width:103px;
        height:250px;
        border:solid 1px #ccc;
        border-radius:4px;
        margin-left:4px;
        margin-top:4px;
    }
    .item-inner {width:100%;}
    .item-text {
        text-align:center;
        font-size:16px;
        font-family:"微软雅黑";
        letter-spacing:5px;
        font-weight:bold;
        padding-top:5px;
    }
    .item-action
    {
        text-align:right;
        padding-right:6px;
    }
    .item-padding{
        padding:10px 0px;
    }
</style>
<div id="layout1" class="mini-layout" style="width:100%;height:100%;">
    <div showHeader="false" region="north" height="500" style="text-align: center">
        <div id="hzGrid" class="mini-datagrid" style="width:100%;height:330px;" showHeader="true" title="记录汇总"
             idField="id" allowResize="true" showPager="true" url="/pageQueryHz" pageSize="14"
             viewType="cardview" itemRenderer="itemRenderer" showColumns="false" sizeList="[14]"
        >
            <div property="columns"></div>
        </div>

        <div>
            <table style="position:absolute;  right: 100px;bottom: 3px;">
                <tr>
                    <td style="float: left;padding-top:10px">
                        <span style="font-size: 25px;">收入</span>
                        <span style="font-size: 25px;">金额：</span>
                        <span id="sr__moneyNum" style="font-size: 25px;color: red">0</span>
                    </td>
                </tr>
                <tr>
                    <td style="float: left;padding-top: 10px">
                        <span style="font-size: 25px;">汇总大写</span>
                        <span style="font-size: 25px;">：</span>
                        <span id="sr__moneyCn" style="font-size: 25px;color: #1b6d85">零</span>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <div showHeader="false" region="center">
        <table>
            <tr>
                <th>收入</th>
                <td id="in" style="color: black">0</td>
            </tr>
            <tr>
                <th>支出</th>
                <td id="to" style="color: green;font-size: 24px;">0</td>
            </tr>
            <tr>
                <th>汇总</th>
                <td id="all" style="color: red;font-size: 24px;">0</td>
            </tr>
            <tr>
                <th>汇总大写</th>
                <td id="allCn" style="color: #1b6d85;font-size: 24px;">零</td>
            </tr>
        </table>
    </div>
</div>

<script>
    mini.parse();
    var grid = mini.get("hzGrid");

    grid.load();

    function itemRenderer(record, rowIndex, meta, grid) {

        var indexSort = record?.indexSort ?? "";
        var name = record?.name ?? "";
        var moneyNum = record?.moneyNum ?? "";
        var moneyCn = record?.moneyCn ?? "";


        meta.rowCls = "item";
        var html = '<div class="item-inner">' +
            '<div class="item-text item-padding" style="color: #f16317">' + indexSort + '</div>' +
            '<div class="item-text item-padding">' + name + '</div>' +
            '<div class="item-action">' +
            '<div class="item-text item-padding" style="color: red">'+moneyNum+'</div>' +
            '<div><div class="item-text item-padding" style="color: #1b6d85">'+moneyCn+'</div></div>' +
            '</div>' +
            '</div>';
        return html;
    }

    grid.on("load",function(e){
        var data = e.data;
        var moneyNum = 0;
        data.forEach(row => {
            moneyNum += (row?.moneyNum??0);
        });

        $("#sr__moneyNum").text(moneyNum);

        $.getJSON("/toMoneyCn",{moneyNum:moneyNum},function(rs){
            $("#sr__moneyCn").text(rs.moneyCn);
        });

        // 总体汇总
        $.getJSON("/lastAll",function(rs){
            for (const rsKey in rs) {
                $("#" + rsKey).text(rs[rsKey]);
            }
        });


    });

</script>
</body>
</html>